<template>
  <div class="box">
    <div class="head">
      <span class="left">{{ queryData.anjianbh }}</span>
    </div>
    <div class="content">
      <!-- 菜单 -->
      <div class="list-nav">
        <el-menu default-active="1-1" class="el-menuList" @open="handleOpen" @close="handleClose">
          <el-submenu v-for="item in menuList" :key="item.id" :index="item.id">
            <template slot="title">
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="subItem in item.children"
                :key="subItem.id"
                :index="subItem.id"
                @click="clickMenuNode(item.showType, subItem,item)"
              >
                <div class="line">
                  <div class="left">{{ subItem.label.left }}</div>
                  <div v-if="!!subItem.label.right" class="right">
                    {{ subItem.label.right }}
                  </div>
                </div>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="main">
        <div v-show="showType === 'table'" class="table-box">
          <table border="1" cellspacing="0">
            <tr v-for="(item,idx) in mainTopList" :key="idx">
              <td class="table-left">{{ item.label }}</td>
              <td class="table-right">{{ item.value }}</td>
            </tr>
          </table>
          <div v-if="mainTopList.length===0" style="text-align: center;height:100px;padding:50px 0;">暂无数据</div>
        </div>
        <div v-show="showType === 'html'">
          {{ mainTopHtml.bgqwhtml }}
        </div>
        <!-- echats -->
        <div
          v-if="showType === 'echart' || showType === 'onlyechart'"
          class="echarts"
        >
          <div v-show="showType === 'echart'" class="title">
            {{ selectInfo.label.right }}
          </div>
          <div v-show="showType === 'echart'" class="echarts-head">
            <div class="echarts-head-item">
              <div class="big-title blue">{{ echartTop.canyuscajzs | echartTopFilter }}件</div>
              <div class="msg gray-title">案件总数</div>
            </div>
            <div class="echarts-head-item">
              <div class="title-list">
                <span class="title left blue">复审：{{ echartTop.canyufsajzs | echartTopFilter }}件</span>
                <span class="title blue">无效：{{ echartTop.canyuwxajzs | echartTopFilter }}件</span>
              </div>
              <div class="msg-box">
                <span class="msg left gray">维持驳回：{{ echartTop.fushenwcbhajs | echartTopFilter }}件</span>
                <span class="msg gray">全部无效：{{ echartTop.wuxiaoqbwxajs | echartTopFilter }}</span>
                <span class="msg gray">维持有效：{{ echartTop.wuxiaowcyxajs | echartTopFilter }}</span>
                <span class="msg left gray">撤销驳回：{{ echartTop.fushencxbhajs | echartTopFilter }}件</span>
                <span class="msg gray">部分无效：{{ echartTop.wuxiaobfwxajs | echartTopFilter }}</span>
                <span class="msg gray">系统点赞数：{{ echartTop.xitongdzzs | echartTopFilter }}次</span>
              </div>
            </div>
            <div class="echarts-head-item">
              <div class="title-list">
                <span class="title left blue">角色</span>
              </div>
              <div class="msg-box">
                <span class="msg gray">主审：{{ echartTop.zhushenajs | echartTopFilter }}件</span>
                <span class="msg gray">参审：{{ echartTop.canshenajs | echartTopFilter }}件</span>
                <span class="msg gray">含义组长：{{ echartTop.heyizzajs | echartTopFilter }}件</span>
              </div>
            </div>
          </div>
          <div v-show="showType === 'echart'" class="echarts-body">
            <div class="body-item">
              <span class="body-item-head">
                {{ echartTop.famingajs | echartTopFilter }}<span class="sub">（88%）</span>
              </span>
              <span class="body-item-foot">发明</span>
            </div>
            <div class="body-item">
              <span class="body-item-head">
                {{ echartTop.shiyongxxajs | echartTopFilter }} <span class="sub">（12%）</span>
              </span>
              <span class="body-item-foot">实用新型</span>
            </div>
            <div class="body-item">
              <span class="body-item-head">
                {{ echartTop.waiguansjajs | echartTopFilter }} <span class="sub">（0%）</span>
              </span>
              <span class="body-item-foot">外观设计</span>
            </div>
          </div>
          <div class="echats-content">
            <div
              v-for="item in echartsData"
              :key="item.title"
              class="content-item"
            >
              <span class="content-item-title">{{ item.title }}</span>
              <div
                :ref="`echarts-${item.title}`"
                class="content-item-main"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { pushInfo, pushDecisionInfo, pushPatenteeInfo, pushCollegialGroupInfo, pushPatentReview, pushEvidenceLink, pusRequesterInfo } from '@/api/push/index'
export default {
  components: {},
  filters: {
    echartTopFilter(val) {
      return val || 0
    }
  },
  data() {
    return {
      selectInfo: {},
      showType: 'table',
      /* 菜单list */
      menuList: [
        {
          label: '决定所涉问题概要',
          id: '1',
          showType: 'table',
          name: 'pushDecisionInfo',
          children: [
            {
              label: {
                left: '决定所涉问题概要'
              },
              id: '1-1'
            }
          ]
        }
      ],
      mainTopListWX: {
        'anjianbh': '案件编号',
        'juedingh': '决定号',
        'juedingr': '决定日',
        'shenqingh': '专利申请号',
        'juedingjl': '无效结论',
        'shifouyxjd': '是否优秀案件',
        'shifouzdaj': '是否重大案件',
        'yizhiqsf': '是否依职权',
        'yizhiqnr': '依职权内容',
        'falvyj': '法律依据',
        'juedingyd': '决定要点',
        'members': '合议组成员',
        'heyizcysfhb': '合议组成员是否回避',
        'huibiqqdcljl': '回避结论',
        'shifouktsl': '是否进行口审',
        'shifouxcky': '是否现场勘验',
        'kanyantcf': '勘验提出方',
        'kanyanjl': '勘验结论',
        'shouquansfygz': '授权后权利要求是否有更正',
        'wuxiaojdsfyxg': '本次无效阶段权利要求是否有修改',
        'xiugaisj': '修改时机',
        'xiugaifs': '修改方式',
        'xiugairdjl': '认定结论',
        'shenchadjc': '审查基础',
        'shouquancxljwx': '因授权程序漏检无效',
        'pingshuzjdzwx': '是否基于授权程序中评述过的证据导致因为新颖性或创造性问题被（部分）无效的案件）',
        'tongwentbtjlaj': '是否无效程序与授权程序就同一具体问题得出不同审查结论的其他案件',
        'heyizcyrs': '作出决定的合议组成员人数',
        'wuxiaoajyqqss': '无效案件中是否有侵权诉讼',
        'fayuanxx': '请求诉讼法院信息',
        'woweizcqqqqjd': '是否在我委作出侵权或确权鉴定',
        'fachuwxqqsctz': '是否发出过无效宣告请求审查通知书',
        'wuxiaosjxtft': '本次无效阶段与授权阶段是否涉及相同的法条',
        'wuxiaozxwxxtft': '本次无效阶段与在先无效阶段是否涉及相同的法条',
        'tijiaockzl': '是否提交参考资料',
        'qingqiurtcfts': '请求人提出的总发条数',
        'qingqiurwxtks': '请求人提出的无效条款',
        'qingqiurfwxtks': '请求人提出的非无效条款',
        'wuxiaolyzfts': '决定理由部分涉及的总法条数',
        'juedinglywxtks': '决定理由部分涉及的无效条款',
        'juedinglyfwxtks': '决定理由部分涉及的非无效条款',
        'cunzaifs': '是否存在复审',
        'duogewx': '是否存在多个无效',
        'cunzaipj': '是否存在判决',
        'falvsy': '法律适用',
        'anyuancs': '案源处室',
        'falvtk': '法条',
        'evidence': '涉及证据名称+证据分类+结论'
      },
      mainTopListWG: {
        anjianbh: '案件编号',
        juedingh: '决定号',
        juedingr: '决定日',
        shenqingh: '专利申请号',
        juedingjl: '无效结论',
        shifouyxjd: '是否优秀案件',
        shifouzdaj: '是否重大案件',
        yizhiqsf: '是否依职权',
        falvyj: '法律依据',
        juedingyd: '决定要点',
        members: '合议组成员',
        heyizcysfhb: '合议组成员是否回避',
        huibiqqdcljl: '回避结论',
        shifouktsl: '是否进行口审',
        shifouxcky: '是否现场勘验',
        kanyantcf: '勘验提出方',
        kanyanjl: '勘验结论',
        xiugairdjl: '认定结论',
        heyizcyrs: '作出决定的合议组成员人数',
        wuxiaoajyqqss: '无效案件中是否有侵权诉讼',
        fayuanxx: '请求诉讼法院信息',
        woweizcqqqqjd: '是否在我委作出侵权或确权鉴定',
        fachuwxqqsctz: '是否发出过无效宣告请求审查通知书',
        tijiaockzl: '是否提交参考资料',
        yibanxfzrd: '一般消费者的认定',
        chanpinzlxthjs: '产品种类相同或相近似',
        youwuzhzyqs: '有无组合转用启示',
        yishibzl: '一事不再理',
        wuxiaoqqrztzg: '无效请求人主体资格',
        zujiancp: '组件产品',
        chengtaosj: '成套设计',
        xiangsisj: '相似设计',
        jiemian: '界面',
        shejibhzt: '涉及变化状态',
        bufenwgsj: '部分外观设计',
        cunzaifs: '是否存在复审',
        duogewx: '是否存在多个无效',
        cunzaipj: '是否存在判决',
        falvsy: '法律适用',
        anyuancs: '案源处室',
        falvtk: '法条',
        evidence: '涉及证据名称+证据分类+结论'
      },
      mainTopListSS: {
        'anjianbh': '案件编号',
        'panjuecdsbh': '判决/裁定书编号',
        'shenqingh': '专利申请号',
        'panjuelx': '判决类型',
        'panjueztjl': '判决总体结论',
        'panjuejl': '判决结论',
        'panjuer': '判决/裁定日',
        'shifouyxjd': '是否优秀案件',
        'shifouzdaj': '是否重大案件',
        'susongsj': '审级',
        'benjuedsfwbscs': '是否败诉重审案件',
        'shejixcky': '是否提出勘验请求',
        'juedingh': '案件对应决定号',
        'juedinglx': '案件对应决定类型',
        'juedingjl': '案件对应决定结论',
        'shifousw': '是否涉外',
        'panjueyjdwb': '判决依据的文本',
        'zhenduiqbftfbyj': '是否对决定针对的全部法条发表意见',
        'yuangaoydsrdygx': '原告与无效/复审程序中当事人的关系',
        'beigaoydsrdygx': '被告与无效/复审程序中当事人的关系',
        'disanrdsrdygx': '第三人与无效/复审程序中当事人的关系',
        'zhengyijd': '争议焦点',
        'shejifjdsjft': '是否涉及非决定涉及法律条款',
        'shejiftjdcs': '是否涉及对于法条的解读与阐释',
        'shejiqlyqjs': '是否涉及权利要求的解释',
        'shejigzcsdpd': '是否涉及公知常识的判定',
        'shejixcky': '是否涉及现场勘验',
        'beichexsfycxwt': '决定被撤销是否因程序问题',
        'shifousjjzfh': '是否涉及禁止反悔',
        'shifousjsfjd': '是否涉及司法鉴定',
        'fayuanrdzjzfs': '法院判决认定内容部分适用证据总份数',
        'shifousjzjl': '是否涉及证据链',
        'pandingsjdzjwt': '判决认定涉及的证据问题',
        'susonglysjzjwt': '诉讼理由涉及的证据问题',
        'falvsy': '法律适用',
        'anyuancs': '案源处室',
        'chengxuwt': '程序问题',
        'falvtk': '法条',
        'zhengjumc': '证据'
      },
      mainTopListFS: { 'anjianbh': '案件编号',
        'panjuecdsbh': '判决/裁定书编号',
        'shenqingh': '专利申请号',
        'panjuelx': '判决类型',
        'panjueztjl': '判决总体结论',
        'panjuejl': '判决结论',
        'panjuer': '判决/裁定日',
        'shifouyxjd': '是否优秀案件',
        'shifouzdaj': '是否重大案件',
        'susongsj': '审级',
        'benjuedsfwbscs': '是否败诉重审案件',
        'shejixcky': '是否提出勘验请求',
        'juedingh': '案件对应决定号',
        'juedinglx': '案件对应决定类型',
        'juedingjl': '案件对应决定结论',
        'shifousw': '是否涉外',
        'panjueyjdwb': '判决依据的文本',
        'zhenduiqbftfbyj': '是否对决定针对的全部法条发表意见',
        'yuangaoydsrdygx': '原告与无效/复审程序中当事人的关系',
        'beigaoydsrdygx': '被告与无效/复审程序中当事人的关系',
        'disanrdsrdygx': '第三人与无效/复审程序中当事人的关系',
        'zhengyijd': '争议焦点',
        'shejifjdsjft': '是否涉及非决定涉及法律条款',
        'shejiftjdcs': '是否涉及对于法条的解读与阐释',
        'shejiqlyqjs': '是否涉及权利要求的解释',
        'shejigzcsdpd': '是否涉及公知常识的判定',
        'shejixcky': '是否涉及现场勘验',
        'beichexsfycxwt': '决定被撤销是否因程序问题',
        'shifousjjzfh': '是否涉及禁止反悔',
        'shifousjsfjd': '是否涉及司法鉴定',
        'fayuanrdzjzfs': '法院判决认定内容部分适用证据总份数',
        'shifousjzjl': '是否涉及证据链',
        'pandingsjdzjwt': '判决认定涉及的证据问题',
        'susonglysjzjwt': '诉讼理由涉及的证据问题',
        'falvsy': '法律适用',
        'anyuancs': '案源处室',
        'chengxuwt': '程序问题',
        'falvtk': '法条',
        'zhengjumc': '证据' }, // 与诉讼一致
      mainTopList: [], // 决定所涉问题概要
      mainTopHtml: {}, // 证据关联  本专利复审
      echartsData: [],
      echartTop: {}, // //echart顶部   含议组相关信息
      queryData: {},
      heyizuInfo: [], // 含议组相关信息
      zhengjuInfo: [], // 证据关联相关信息
      patentReviewInfo: [], // 本专利复审相关信息（dataSource='fushen'时显示）
      requesterInfo: [], // 请求人相关信息
      patenteeInfo: [] // 专利权人相关信息
    }
  },
  created() {
    console.log('--------------------- created() ------------------------')
    console.log('query', this.$route.query)
    this.queryData = JSON.parse(this.$route.query.data)
    console.log('queryData', this.queryData)
    //this.pushInfo({"dataSource":"", "anjianbh":""}) // 相关推送-相关推送列表信息 列表，列表 DLJ
    this.pushInfo(this.queryData) // 相关推送-相关推送列表信息 列表，列表 DLJ
    this.clickMenuNode('table', { label: { left: '', right: '' }, id: '' }, { name: 'pushDecisionInfo' })

    // this._pushDecisionInfo();     // 相关推送-决定所涉问题概要
  },
  mounted() {
    // this.initecharts();
  },
  methods: {
    // 相关推送-相关推送列表信息
    // whm开始
    async pushInfo() {
      console.log('--------------------- pushInfo START  ------------------------')
      const { data } = await pushInfo(this.queryData)
      console.log(data)
      this.heyizuInfo = data.heyizuInfo // 含议组相关信息
      this.zhengjuInfo = data.zhengjuInfo // 证据关联相关信息
      this.patentReviewInfo = data.patentReviewInfo // 本专利复审相关信息（dataSource='fushen'时显示）
      this.requesterInfo = data.requesterInfo // 请求人相关信息
      this.patenteeInfo = data.patenteeInfo // 专利权人相关信息（dataSource='wuxiao'、'waiguan'、'susong'时显示）

      const heyizuInfo = this.menuListInfoFilter(this.heyizuInfo, '2', '含议组相关信息', 'echart', 'heyizuInfo')
      const patenteeInfo = this.menuListInfoFilter(this.patenteeInfo, '7', '专利权人', 'onlyechart', 'patenteeInfo')
      const requesterInfo = this.menuListInfoFilter(this.requesterInfo, '8', '请求人', 'onlyechart', 'requesterInfo')
      const zhengjuInfo = this.menuListInfoFilterArr(this.zhengjuInfo, '3', '证据关联', 'html', 'zhengjuInfo')
      const patentReviewInfo = this.menuListInfoFilterArrTwo(this.patentReviewInfo, '9', '本专利复审', 'html', 'patentReviewInfo')

      /* DLJ UPDATE 20210905 START */
      this.menuList.push(heyizuInfo)                 // 含议组相关信息
      if(this.queryData.dataSource === "fushen"){     // DLJ 20210905 APPEND 
          this.menuList.push(patentReviewInfo)       // 本专利复审
      }
      this.menuList.push(zhengjuInfo)                // 证据关联
      if(this.queryData.dataSource != "fushen"){     // DLJ 20210905 APPEND 
          this.menuList.push(patenteeInfo)           // 专利权人
      }
      this.menuList.push(requesterInfo)              // 请求人
      /* DLJ UPDATE 20210905 END */

      console.log('this.menuList', this.menuList)

      console.log('--------------------- pushInfo END ------------------------')
    },
    menuListInfoFilterArrTwo(arr, id, nameText, showType, name) {
      const arrNew = []
      arr.forEach((item, idx) => {
        var objNew1 = {}
        objNew1['left'] = item['juedingjl'] + '  ' + item['juedingh']
        arrNew.push({ label: objNew1, id: id + '-' + Number(idx + 1) })
      })
      return {
        label: nameText,
        id: id,
        name: name,
        showType: showType,
        children: arrNew
      }
    },
    menuListInfoFilterArr(arr, id, nameText, showType, name) {
      const arrNew = []
      arr.forEach((item, idx) => {
        var objNew1 = {}
        objNew1['left'] = item['anjianlx']
        objNew1['right'] = item['juedingh']
        arrNew.push({ label: objNew1, id: id + '-' + Number(idx + 1) })
      })
      return {
        label: nameText,
        id: id,
        name: name,
        showType: showType,
        children: arrNew
      }
    },
    menuListInfoFilter(obj, id, nameText, showType, name) {
      const arrNewKey = []
      const arrNewVal = []
      for (const key in obj) {
        if (key.indexOf('xm') === -1) {
          arrNewKey.push(obj[key])
        }
      }
      for (const key in obj) {
        if (key.indexOf('xm') !== -1) {
          arrNewVal.push(obj[key])
        }
      }
      const arrNew = []
      arrNewVal.forEach((item, idx) => {
        const objNew = {}
        if (arrNewKey.length === 0) {
          objNew['left'] = arrNewVal[idx]
        } else {
          objNew['left'] = arrNewKey[idx]
          objNew['right'] = arrNewVal[idx]
        }
        arrNew.push({ label: objNew, id: id + '-' + Number(idx + 1) })
      })
      return {
        label: nameText,
        id: id,
        name: name,
        showType: showType,
        children: arrNew
      }
    },
    // 无效返回结果集
    mainTopListFilter(obj) {
      // this.mainTopListWX
      // dataSource =   wuxiao   ,  waiguan  , panjue ,  fushen
      // dataSource='wuxiao'、'waiguan'、'susong' 'fushen'
      // this.queryData.dataSource
      const arrNew = []
      const mainTopListWX = this.queryData.dataSource === 'wuxiao' ? this.mainTopListWX : ''
      const mainTopListWG = this.queryData.dataSource === 'waiguan' ? this.mainTopListWG : ''
      const mainTopListSS = this.queryData.dataSource === 'panjue' ? this.mainTopListSS : ''
      const mainTopListFS = this.queryData.dataSource === 'fushen' ? this.mainTopListFS : ''
      const mainTopList = mainTopListWX || mainTopListWG || mainTopListSS || mainTopListFS
      for (const key in obj) {
        const objNew = {}
        for (const keyWX in mainTopList) {
          if (key === keyWX) {
            objNew['label'] = mainTopList[keyWX]
            objNew['value'] = obj[key]
            arrNew.push(objNew)
          }
        }
      }
      console.log('mainTopListWX-----------', arrNew)
      return arrNew
    },
    // whm结束
    /* DLJ APPEND START */
    // 相关推送-决定所涉问题概要
    async _pushDecisionInfo() {
      console.log('--------------------- _pushDecisionInfo 888------------------------')
      const { code, data } = await pushDecisionInfo(this.queryData)
      console.log('_pushDecisionInfo---8888', data)
      console.log(code)
      if (code == 200) {
        this.mainTopList = this.mainTopListFilter(data)
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    // 相关推送-专利权人
    async _pushPatenteeInfo() {
      console.log('--------------------- _pushPatenteeInfo ------------------------')
      const { code, data } = await pushPatenteeInfo(this.queryData)
      console.log(data)
      console.log(code)
      if (code == 200) {
        // this.mainTopList = data
        this.echartsData = data ? this.echartsPusRequesterFilter(data) : []
        this.$nextTick(() => {
          this.initecharts()
        })
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    echartsDataFilter(obj) {
      if (obj === '{}') return []
      console.log('echartsDataFilter', obj)

      const arrNew = [
        {
          title: '案件数量',
          data: [
            { value: obj.canyussajzs, name: '诉讼', color: 'red' },
            { value: obj.canyuwxajzs, name: '无效' },
            { value: obj.canyufsajzs, name: '复审' }
          ]
        },
        {
          title: '复审比率',
          data: [
            { value: obj.fushencxbhajs, name: '撤回驳回' },
            { value: obj.fushenwcbhajs, name: '维持驳回' }
          ]
        },
        {
          title: '无效比率',
          data: [
            { value: obj.wuxiaowcyxajs, name: '维持有效' },
            { value: obj.wuxiaobfwxajs, name: '部分有效' },
            { value: obj.wuxiaoqbwxajs, name: '全部无效' }
          ]
        }
      ]
      return arrNew
    },
    // 相关推送-合议组相关信息
    async _pushCollegialGroupInfo() {
      console.log('--------------------- _pushCollegialGroupInfo ------------------------')
      const { code, data } = await pushCollegialGroupInfo(this.queryData)
      console.log('echart', data)
      console.log(code)
      if (code == 200) {
        this.echartTop = data
        this.echartsData = data ? this.echartsDataFilter(data) : []
        this.$nextTick(() => {
          this.initecharts()
        })
        console.log('echartsData', this.echartsData)
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    // 相关推送-本专利复审
    async _pushPatentReview() {
      console.log('--------------------- _pushPatentReview ------------------------')
      const { code, data } = await pushPatentReview(this.queryData)
      console.log(data)
      console.log(code)
      if (code == 200) {
        this.mainTopHtml = data
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    // 相关推送-证据关联
    async _pushEvidenceLink() {
      console.log('--------------------- _pushEvidenceLink ------------------------')
      const { code, data } = await pushEvidenceLink(this.queryData)
      console.log(data)
      console.log(code)
      if (code == 200) {
        this.mainTopHtml = data
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    echartsPusRequesterFilter(obj) {
      if (obj === '{}') return []
      console.log('echartsDataFilter', obj)

      const arrNew = [
        {
          title: '案件数量',
          data: [
            { value: Number(obj.susongbsajs) + Number(obj.susongssajs), name: '诉讼', color: 'red' },
            { value: obj.canyuwxajzs, name: '无效' },
            { value: obj.canyufsajzs, name: '复审' }
          ]
        },
        {
          title: '复审比率',
          data: [
            { value: obj.fushencxbhajs, name: '撤回驳回' },
            { value: obj.fushenwcbhajs, name: '维持驳回' }
          ]
        },
        {
          title: '无效比率',
          data: [
            { value: obj.wuxiaowcyxajs, name: '维持有效' },
            { value: obj.wuxiaobfwxajs, name: '部分有效' },
            { value: obj.wuxiaoqbwxajs, name: '全部无效' }
          ]
        }
      ]
      return arrNew
    },
    // 相关推送-请求人
    async _pusRequesterInfo(requesterName) {
      console.log('--------------------- _pusRequesterInfo ------------------------')
      const { code, data } = await pusRequesterInfo({"requesterName" :requesterName})
      console.log(data)
      console.log(code)
      if (code == 200) {
        /* 这里的赋值有问题 ！！！ */
        // this.echartsData = data
        this.echartsData = data ? this.echartsPusRequesterFilter(data) : []
        this.$nextTick(() => {
          this.initecharts()
        })
        // this.$message.warning('获取专利法树形结构！')
      }
    },
    /* DLJ APPEND END */

    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    /* initecharts */
    initecharts() {
      this.echartsData.forEach(({ title, data }, index) => {
        const options = {
          legend: {
            show: false
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {d}%'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        // index === 0 && (options.series[0].label = {
        //   formatter: '{b} {c}'
        // })
        echarts.init(this.$refs[`echarts-${title}`][0]).setOption(options)
      })
    },
    clickMenuNode(showType, subItem, item) {
      console.log('------------------------- dlj clickMenuNode START ------------------')

      console.log(showType, subItem, item)
      console.log(subItem.id, item.name)
      console.log(subItem.label.left)
      this.mainTopList = []
      // [showType]存在的值:table, echart, onlyechart
      if (showType) {
        this.showType = showType
        if (showType === 'echart' || showType === 'onlyechart') {
          this.$nextTick(() => {
            this.initecharts()
          })
        }
        this.selectInfo = subItem

        if (item.name === 'requesterInfo') { // 1. 处理左侧列表中的[请求人]点击事件
          this._pusRequesterInfo(subItem.label.left) // echartsData 这个变量是饼图的加载数据；上面的方法返回后把数据赋值给他；
        } else if (item.name === 'patenteeInfo') { // 2.1 处理左侧列表中的[专利权人-复审案件]点击事件
          this._pushPatenteeInfo()
        } else if (item.name === 'zhengjuInfo') { // 3.1 处理左侧列表中的[证据关联-复审案件]点击事件
          this._pushEvidenceLink()
        } else if (item.name === 'patentReviewInfo') { // 4 处理左侧列表中的[本专利复审]点击事件
          this._pushPatentReview()
        } else if (item.name === 'heyizuInfo') { // 5.1 处理左侧列表中的[含议组相关信息-参审员]点击事件
          this._pushCollegialGroupInfo()
        } else if (item.name === 'pushDecisionInfo') {
          console.log('00000')
          this._pushDecisionInfo()
        } else if (item.name === 'patenteeInfo') {
          this._pushPatenteeInfo
        }
      }
      console.log('------------------------- dlj clickMenuNode END ------------------')
    }
  }
}
</script>
<style lang="scss" scoped>
$font-color: #303113;
$main-color: #303133;
$blue-color: #2d54b8;

.box {
  width: 1200px;
  margin: 0 auto;
  font-family: "PingFang SC",
    Microsoft YaHei ",微软雅黑," Microsoft JhengHei ",华文细黑,STHeiti,MingLiu" !important;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;

    .left {
      font-size: 24px;
      color: $font-color;
      font-weight: bolder;
    }

    .btn-list {
      .font-family {
        margin-left: 10px;
      }
      .list-icon {
        vertical-align: middle;
        color: #909399;
        font-size: 20px;
        margin-left: 15px;
      }
    }
  }

  .content {
    .list-nav {
      width: 270px;
      border: 1px solid #dcdfe6;
      border-left: 6px solid $blue-color;
      background-color: #fff;
      border-radius: 5px;
      overflow: hidden;
      box-sizing: border-box;
      display: inline-block;
      float: left;

      .el-menuList {
        border: none;
        ::v-deep .el-submenu__title {
          height: 50px;
          line-height: 50px;
          padding: 0 13px 0 10px !important;
          background-color: #ebeef5;
          color: #2d54b8;
          font-size: 16px;
          .el-icon-arrow-down {
            &::before {
              color: #2d54b8;
              font-weight: 900;
            }
          }
        }
        ::v-deep .el-submenu {
          border-bottom: 1px solid #fff;
          box-sizing: border-box;
          &:last-child {
            border-bottom: none;
          }
        }
        ::v-deep.el-menu-item-group {
          .el-menu-item-group__title {
            padding: 0;
          }
          .el-menu-item {
            height: 46px;
            line-height: 46px;
            box-sizing: border-box;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 !important;
            margin: 0 5px 0 10px;
            &.is-active {
              box-sizing: border-box;
              background-color: #fff;
              .line {
                .left {
                  font-weight: 600;
                  color: $blue-color;
                }

                .right {
                  font-weight: 600;
                  color: $blue-color;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }
            &:hover,
            &:focus {
              box-sizing: border-box;
              background-color: #fff;
              .line {
                .left {
                  font-weight: 600;
                  color: $blue-color;
                }

                .right {
                  font-weight: 600;
                  color: $blue-color;
                }
              }
            }
            .line {
              cursor: pointer;
              display: flex;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              color: $main-color;

              .right {
                color: #909399;
              }
            }
          }
        }
      }

      .item {
        .treeDom {
          ::v-deep .el-tree-node__label {
            font-size: 14px;
            color: $font-color;
          }
        }
        .title {
          height: 50px;
          line-height: 50px;
          padding: 0 13px 0 10px !important;
          background-color: #ebeef5;
          color: #2d54b8;
          font-size: 16px;
        }

        .list {
          margin-left: 10px;
          .list-item {
            .block {
              padding: 15px 5px 15px 0;
              border-bottom: 1px solid #e8e8e8;
              font-size: 14px;
              .top {
                margin-bottom: 10px;
              }
              .bottom {
                line-height: 30px;
                color: #909399;
              }
            }
            &:last-child {
              .line {
                border-bottom: none;
              }
            }
            .line {
              display: flex;
              padding: 15px 5px 15px 0;
              border-bottom: 1px solid #e8e8e8;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              color: $main-color;

              .right {
                color: #909399;
              }
            }
          }
        }
      }
    }

    .main {
      float: right;
      display: inline-block;
      width: 900px;
      background-color: #fff;
      border-radius: 5px;
      padding: 20px;
      box-sizing: border-box;
      .main-top {
        background-color: #ebeef5;
        padding: 20px;
        .main-top-item {
          display: flex;
          font-size: 14px;
          margin-bottom: 10px;
          .main-top-item-left {
            min-width: 100px;
            text-align: right;
            color: #606266;
          }
          .main-top-item-right {
            line-height: 24px;
          }

          &:last-child {
            margin-bottom: 0px;
          }
        }
      }

      .main-bottom {
        margin-top: 10px;
      }

      .table-box {
        font-size: 14px;
        table {
          border: 0.5px solid #e8e8e8;
          border-collapse: collapse;
        }
        .table-left {
          background-color: #fcfcfc;
          width: 200px;
          padding: 10px;
          color: #606266;
        }
        .table-right {
          background-color: #fff;
          padding: 10px 15px;
          line-height: 20px;
          width: 80%;
        }
      }

      .echarts {
        .title {
          color: $font-color;
          font-weight: bolder;
          font-size: 18px;
          margin-bottom: 20px;
        }

        .echarts-head {
          padding: 20px 0;
          box-sizing: border-box;
          background-color: #ebeef5;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 115px;
          margin-bottom: 20px;
          .blue {
            color: #3057b5 !important;
            font-weight: bolder;
          }

          .gray-title {
            color: #606266;
          }

          .gray {
            color: #909399;
          }

          .echarts-head-item {
            min-height: 100%;
            max-height: 100%;
            border-right: 1px solid $blue-color;
            padding: 0 40px;
            box-sizing: border-box;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: space-between;

            &:first-child {
              min-width: 165px;
              padding: 5px 0;
              box-sizing: border-box;
            }

            &:nth-child(2) {
              min-width: 435px;
              max-width: 435px;
            }

            &:last-child {
              min-width: 303px;
              max-width: 303px;
              border-right: none;
            }

            .big-title {
              font-size: 28px;
            }

            .msg {
              font-size: 14px;
            }

            .left {
              margin-right: 40px !important;
            }

            .title-list {
              margin-bottom: 10px;
              font-size: 22px;
              width: 100%;
            }

            .msg-box {
              display: flex;
              flex-wrap: wrap;

              .msg {
                margin-right: 30px;
                margin-bottom: 5px;

                &:nth-child(3n) {
                  margin-right: 0;
                }
              }
            }
          }
        }

        .echarts-body {
          display: flex;
          justify-content: space-between;
          height: 95px;
          margin-bottom: 20px;

          .body-item {
            width: 270px;
            height: 100%;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .body-item-head {
              font-size: 22px;
              color: $blue-color;
              font-weight: bolder;
              .sub {
                font-size: 14px;
              }
            }

            .body-item-foot {
              color: $font-color;
              font-size: 14px;
              margin-top: 10px;
            }
          }
        }

        .echats-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .content-item {
            min-width: calc(50% - 10px);
            margin-bottom: 15px;
            margin-right: 20px;
            height: 351px;

            .content-item-main {
              height: 310px;
              width: 100%;
              border-right: 1px solid #dcdfe6;
            }

            &:nth-child(2n) {
              border-right: none;
              margin-right: 0;

              .content-item-main {
                height: 310px;
                width: 100%;
                border-right: none;
              }
            }
            .content-item-title {
              display: inline-block;
              padding-left: 10px;
              margin-bottom: 20px;
              color: $font-color;
              font-size: 16px;
              border-left: 4px solid $blue-color;
            }
          }
        }
      }
    }
  }
}
</style>
